/* ====================================== Select  ====================================== */
import React from 'react'
import { TreeSelect } from 'antd'
const { $fn } = window
// ===================================================================== 
class Index extends React.Component {
	state = {
		data:[],
		value:this.props.multiple === false ? undefined : []
	}
	
	_onChange = (value, label ) => {
		const { name, onChanged, onChange, outer, data } = this.props
		
		if(!outer){ this.setState({ value }) }
		
		let model = name ? { [name]: value } : value
		
		onChanged && onChanged({ model, value, label, name, data })
		onChange && onChange(value)
	}
	
	setValue = value => this.setState({ value })
	getValue = () => this.state.value
	
	clear = () => this.setState({ value: '', key:this.state.key+1 })
	

	dropdownRender = (menu) => {
		const { dropdownRender } = this.props
		dropdownRender && dropdownRender(menu)
		if (dropdownRender) {
			return dropdownRender(menu)
		} else {
			return <React.Fragment>{menu}</React.Fragment>
		}
	}
	
	render(){
		const { data, value, p , width, size, style,isP, className, disabled, loading, bordered, auto, noClear, checkable = true, multiple, filterName } = this.props
		const { key } = this.state
		const _data = data || this.state.data
		const t = p ? p : ''
		const borderedValue = bordered === false ? false : true
		const _size = size || 'small'
		const _value = this.state.value === undefined ? value : this.state.value
		const isClear = noClear ? false : true
		return (
			<TreeSelect
				key 		= { key }
				size		= { _size } 
				onChange	= { this._onChange} 
				style		= {{ width,...style }} 
				treeData	= { _data }
				value 		= { _value }
				disabled 	= { !$fn.hasArray(_data) || disabled }
				className 	= {`${className?className:'w'} ${bordered===false ? 'input-bordered':''}`}
				placeholder	= { isP ? '请选择' + t :  t  }
				treeCheckable 	= { checkable }
				loading		= { loading }
				maxTagCount = { 3 }
				maxTagPlaceholder = { omittedValues => {
					return '+' + _value?.length
				} }
				bordered	= { borderedValue }
				showCheckedStrategy = { TreeSelect.SHOW_ALL }
				treeNodeFilterProp	= { filterName }
				multiple	= { multiple }
				showSearch
				allowClear  = { isClear }
				dropdownClassName = { _size === 'small' ? 'dropdown-small' : ''}
				dropdownMatchSelectWidth = {auto ? false : true}
				dropdownRender = {menu => this.dropdownRender(menu)}
			/>
		)
	}
}
export default Index